<template>
    <div class="container block">
        <div class="header">
            <div class="search">
                归档时间
                <el-date-picker
                    v-model="fileTime"
                    type="daterange"
                    class="date-solt screen-i"
                    unlink-panels
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    value-format="YYYY-MM-DD"
                />
                创建时间
                <el-date-picker
                    v-model="creationTime"
                    type="daterange"
                    class="date-solt screen-i"
                    unlink-panels
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    value-format="YYYY-MM-DD"
                />
                <input
                    type="text"
                    placeholder="请输入人员/项目名称"
                    class="input search-input"
                    v-model="searchText"
                    @keydown.enter="search"
                />
                <button class="btn" @click="search">搜索</button>
                <button class="btn-white" @click="onReset">重置</button>
            </div>
            <div class>
<!--                <el-button  style="background:#1989FA;color:#fff;" @click="onExport" :disabled="selects.length === 0" >-->
<!--                    <i class="el-icon el-icon-upload2" />导出勾选-->
<!--                </el-button>-->
                <export-button @export="onExport" :disabled="selects.length === 0">导出勾选</export-button>
                <el-button style="background:#FF7E68;color:#fff;" class="btn btn-red" @click="isDeletePopup = true" :disabled="selects.length === 0">
                    <i class="el-icon el-icon-delete" />
                    删除
                </el-button>
            </div>
        </div>
        <div class="table">
            <el-table
                :data="tableData"
                style="width: 100%"
                :header-row-style="{ color: '#202536' }"
                :row-style="{ color: '#5E617D' }"
                @selection-change="handleSelectionChange"
            >
                <el-table-column type="selection" />
                <el-table-column
                    prop="projectName"
                    width="150"
                    label="项目名"
                />
                <el-table-column prop="contacts" label="负责人" />
                <el-table-column prop="pwCount" width="90" label="总人数" />
                <el-table-column
                    prop="createTime"
                    width="200"
                    label="创建时间"
                />
                <el-table-column prop="operator" label="归档人" />
                <el-table-column
                    prop="archivedRemark"
                    width="200"
                    label="备注"
                />
                <el-table-column
                    prop="archivedTime"
                    width="200"
                    label="归档时间"
                />
                <el-table-column label="操作">
                    <template #default="scope">
                        <p
                            style="color:#1989FA;float:left;"
                            class="point"
                            @click="
                                $router.push({
                                    path: '/project/place/detail/' + scope.row.id
                                })
                            "
                        >
                            查看详情
                        </p>
                        <p class="link" @click="recovery(scope.row.id)" style="margin-left:65px">
                            恢复
                        </p>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                class="pagination"
                v-model:currentPage="pageNum"
                v-model:page-size="pageSize"
                :page-sizes="[10, 30, 50, 100]"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            >
            </el-pagination>
        </div>
    </div>
    <el-dialog v-model="isDeletePopup" title="提示" width="450px" top="15%">
        <span>已选定 <span style="font-weight: bold;">{{ selects.length }}</span> 条归档项目，删除后将不可恢复，是否确定删除？</span>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="isDeletePopup = false">取消</el-button>
                <el-button type="primary" @click="onDelete"
                >确定</el-button
                >
            </span>
        </template>
  </el-dialog>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { getPlaceProject, placeProject, deleteArchive } from '@/api/project'
import { ProjectDto } from '@/api/dto'
import { regressionFileExport } from '@/api/export'
import store from '@/store/index'
import { ElMessageBox } from 'element-plus'
import axios from 'axios'
import { downLoadFile } from '../utils/util'
export default defineComponent({
    name: 'ProjectPlace',
    data () {
        return {
            fileTime: '',
            creationTime: '',
            pageSize: 10,
            pageNum: 1,
            total: 0 as number | undefined,
            tableData: [] as ProjectDto[],
            searchText: '',
            searchValue: '',
            count: {
                men: 0,
                count: 0,
                women: 0
            },
            selects: '' as string | string [],
            isDeletePopup: false
        }
    },
    created () {
        this.handleCurrentChange()
    },
    methods: {
        async onDelete () {
            await deleteArchive(this.selects)
            await this.handleCurrentChange()
            this.$message.success('删除成功')
            this.isDeletePopup = false
        },
        handleCurrentChange () {
            getPlaceProject({
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                searchText: this.searchValue,
                beginCreateTime: this.creationTime ? this.creationTime[0] : '',
                endCreateTime: this.creationTime ? this.creationTime[1] : '',
                beginArchivedTime: this.fileTime ? this.fileTime[0] : '',
                endArchivedTime: this.fileTime ? this.fileTime[1] : ''
            }).then(res => {
                this.total = res.total
                this.tableData = res.list
            })
        },
        search () {
            this.searchValue = this.searchText
            this.pageNum = 1
            this.handleCurrentChange()
        },
        onReset () {
            this.searchText = ''
            this.creationTime = ''
            this.fileTime = ''
            this.search()
        },
        handleSizeChange () {
            this.pageNum = 1
            this.handleCurrentChange()
        },
        async recovery (id: string) {
            await placeProject({
                archivedIds: [id],
                isArchived: 0
            })
            this.$message.success('取消归档成功')
            this.handleCurrentChange()
        },
        async onExport () {
            // regressionFileExport
            const result = await regressionFileExport({
                ids: this.selects.toString()
            }, {
                loading: true
            })
            console.log(result)
            if (!result.fileUrl && result.exportStatus === 0) {
                store.commit('getLongPollingFile', result)
            } else {
                axios({
                    url: result.fileUrl,
                    method: 'GET',
                    responseType: 'blob'
                }).then(async (response) => {
                    await downLoadFile(response, result.exportType, result.updateTime, result.remark)
                    await this.$message.success('导出成功！')
                })
            }
            // window.location.href =
            //     process.env.VUE_APP_BASE_URL +
            //         '/common/download?delete=true&fileName=' +
            //         result

            // this.$message.success('导出成功！')
        },
        handleSelectionChange (selects: { id: string }[]) {
            this.selects = selects.map(item => item.id)
            console.log(this.selects)
        }
    }
})
</script>

<style lang="stylus" scoped>
table()
:deep().date-solt
    width 241px
    margin-right 20px
</style>
